<template>
	<view>
		<!-- 汽车票头部组件 -->
		<view class="busDetails">
			<view class="above">
				<view class="startDate"> {{startDate}} </view>
				<view class="week">{{ week }}</view>
				<view class="time">{{ info.startTime }}发车</view>
			</view>
			<view class="middle">
				<view class="depart">{{ info.stationName }}</view>
				<image class="arrows" src="@/static/img/arrows.png" mode=""></image>
				<view class="depart">{{ info.targetName }}</view>
			</view>
			<view class="base">
				<view class="type">{{ info.busType }}</view>
				<view class="particulars">里程:{{ info.mileage }}km</view>
				<view class="particulars">班次:{{ info.busnum }}</view>
				<view class="particulars">终:{{ info.terminalName }}</view>
			</view>
		</view>
		<!-- 提示 -->
		<view class="popover">
			<view @click="showBottom()" class="">{{ refund === true ? '支持在线退票 >' : '不支持在线退票' }}</view>
			<view @click="showBottom()" class="">退票规则 ></view>
			<view @click="showBottom()" class="">不支持儿童购票 ></view>
			<bottomSheet :isShowBottom="isShowBottom" :hint="hint" :supports="supports" @closeBottom="closeBottom"></bottomSheet>
		</view>
	</view>
</template>

<script>
import value from '../../../static/value/value.js';
import bottomSheet from '../../../components/bbh-sheet/bottomSheet.vue';
export default {
	props: {
		question: {},
		refund: '',
	},
	components: {
		bottomSheet
	},
	data() {
		return {
			// items: ['支持在线退票', '服务费', '不支持儿童购票'],
			info: value.value.busInfoMsg,
			week: this.$ut.GetWeek(value.value.busInfoMsg.startDate),
			startDate:value.value.busInfoMsg.startDate.split(' ')[0],
			hint: this.question,
			supports: this.refund,
			isShowBottom: false, //底部弹窗开关
			isShowLeftFri: false, //先显示阴影，再显示侧滑内容，加个延时不让页面闪动体验会更好点
			isShowRight: false, //右边侧滑开关,
			refunds: false
		};
	},
	onLoad() {
	},
	methods: {
		change(e) {
			this.count = e;
			this.btnnum = e;
			console.log(this.count);
		},
		//底部开关
		showBottom() {
			this.isShowBottom = true;
		},
		closeBottom() {
			this.isShowBottom = false;
		},
	}
};
</script>

<style scoped>
.busDetails {
	width: 95%;
	margin: auto;
	border-radius: 10upx;
	background-color: #ffffff;
}

.above {
	display: flex;
}

.startDate {
	font-size: 32upx;
	font-weight: bold;
	padding: 30upx;
}

.week {
	font-size: 32upx;
	font-weight: bold;
	padding: 30upx;
}

.time {
	font-size: 32upx;
	font-weight: bold;
	margin-left: 20upx;
	padding: 30upx;
}

.depart {
	font-size: 35upx;
	font-weight: bold;
	margin-left: 30upx;
}

.middle {
	display: flex;
}

.arrows {
	width: 20%;
	height: 15upx;
	margin-top: 15upx;
	margin-left: 40upx;
}

.base {
	display: flex;
	margin-top: 15upx;
	padding-bottom: 10upx;
}

.type {
	margin-left: 30upx;
	font-size: 25upx;
	color: #808080;
}

.particulars {
	margin-left: 25upx;
	font-size: 25upx;
	color: #808080;
}

.serve {
	width: 95%;
	margin: auto;
	display: flex;
	margin-top: 15upx;
}

.refund {
	height: 35upx;
	color: #01a1ea;
	font-size: 22upx;
	margin-left: 20upx;
	padding: 5upx 15upx;
	border-radius: 20upx;
	background-color: #ffffff;
}
/* 提示 */
.popover {
	width: 100%;
	display: flex;
	margin-top: 20upx;
}
.popover view {
	height: 43upx;
	color: #01a1e9;
	padding: 0 25upx;
	font-size: 20upx;
	line-height: 43upx;
	margin-left: 25upx;
	border-radius: 20upx;
	background-color: #ffffff;
}
</style>
